<template>
	<div id="marketDiv">
        <aside style="z-index: 22;">
            <menu>
                <ul style="margin-left: -80px;">
                  
                        <li v-for="item in foodtype" class="catogeryli" pd="">
                            
                                <div v-show="item.typeid == cata" class="yellowSlide"></div>

                            <a  @click="showGoods(item.typeid)">

                                <span :id="yellow+item.typeid"></span>
                                {{ item.typename }}
                            </a>


                        </li>
                </ul>
            </menu>
        </aside>

        <nav>
            <ul>
                <li id="allTypeBtn" @click="showType()"><span>全部分类<span class="glyphicon glyphicon-chevron-down"></span></span></li>
                <li id="allSortBtn" @click="showSort()"><span>综合排序<span class="glyphicon glyphicon-chevron-down"></span></span></li>
            </ul>
        </nav>
		
		<section>

            <menu>
                <ul style="margin-left: -80px;">
                   
                        <li v-for="goods in shoplist">

                            <a href="#">

                                <img :src="goods.productimg">

                                <div class="shoppingInfo">
                                    <h6>{{ goods.productlongname }}</h6>
                                    <div class="detailTag">

                                        <span>精选</span>
                                        <span></span>

                                    </div>
                                    <p class="unit">{{ goods.specifics }}</p>
                                    <p class="price"><span>￥{{ goods.price }}</span><s>￥{{ goods.marketprice }}</s></p>
                                </div>

                            </a>
                             <section>
                                <button class="subShopping" :goodsid="goods.id">-</button>
                                <span>0</span>
                                <button class="addShopping" :goodsid="goods.id">+</button>
                            </section>

                        </li>

                </ul>
				
				<div id="type_container" v-show="type_boolean">

                    <div>
                            <a v-for="type in type_list" @click="showGoods(cata,type[1])">
                                <span>{{type[0]}}</span>
                            </a>
                    </div>

                </div>

                <div id="order_container" v-show="order_boolean">
                    <div>
                        <a @click="showGoods(cata,cid,0)">
                            <span>默认排序</span>
                        </a>
                        <a @click="showGoods(cata,cid,1)">
                            <span>销量排序</span>
                        </a>
                        <a @click="showGoods(cata,cid,2)">
                            <span>价格最高</span>
                        </a>
                        <a @click="showGoods(cata,cid,3)">
                            <span>价格最低</span>
                        </a>

                    </div>
                </div>
                
            </menu>

        </section>
        

    </div>
</template>

<script>
	import axios from 'axios'
	export default{
		data(){
			return {
				foodtype:"",
				yellow:"yellow",
				shoplist: "",
				order_boolean: false,
				type_boolean: false,
				type_list: '',
				cata : '',
				cid: '',
			}
		},
		created(){
			const that = this
			axios.post('/foodtypes')
				 .then(res => {
				 	that.foodtype = res.data
				 	that.showGoods()
				 })
			
		},
		methods:{
			showGoods(categoryid, cid, num){
				const that = this
				that.type_boolean = false;
				this.order_boolean = false;
				const category = categoryid ? categoryid : '104749';
				const childid = cid ? cid : 0 ;
				const nums = num ? num : 0;
				axios.post('/shoplist',{
					'categoryid' :category,
					'cid': childid,
					'num': nums,
					})
					 .then(res => {
					 	that.shoplist = res.data
					 })
				const type = [];
				for (var m = 0;m < that.foodtype.length; m ++){
					if (parseInt(category) == parseInt(that.foodtype[m]['typeid'])) {
						const alltype = that.foodtype[m].childtypenames;
						
						const  alltypearr = alltype.split('#');
						
						for (var k = 0; k < alltypearr.length; k++) {
							type.push(alltypearr[k].split(':'))
						}
						break;
					}
				}
				this.type_list = type;
				that.cata = category;
				that.cid = cid;
				
			},
			showType(){
				const that = this;
				this.type_boolean = !this.type_boolean;
				
			},
			showSort(num){
				const that = this
				this.order_boolean = !this.order_boolean;
			},
			
		}
	}
</script>

<style>
	@import '../../../static/market/css/market.css'
</style>